<template>
    <div class="user-container">
        <div class="userBg">
            <div class="userInfo">
                <div class="avatarImg">
                    <van-image @click="updateAvatar" round width="80px" height="80px" :src="avatar" />
                    <input v-show="false" type="file" ref="avatar" @change="uploadAvatar" />
                </div>
                <div style="color:#fff">
                    <van-button @click="upload" size="mini">更换头像</van-button>
                </div>
                <div class="username">
                    登录名：{{ $store.state.userInfo.username }}
                </div>
                <van-icon class="setting" name="setting-o" size="24" @click="setting"/>
            </div>
        </div>

        <div class="flex_c_c">
            <div class="info">
                <van-cell-group>
                    <van-cell title="我的订单" value="全部订单" @click="$router.push('/orderlist')" is-link />
                    <van-cell title="收货地址" @click="$router.push('/address')" is-link />
                    <van-cell title="设置" is-link />
                    <van-cell title="关于喜多多" value="v1.0.3" />
                    <van-button type="danger" block @click="logout">退出登录 </van-button>
                </van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
}
</script>

<style lang="scss" scoped>
.user-container {
    height: 100vh;
    background: #eee;

    .userBg {
        padding: 10px;
        height: 180px;
        background: rgb(55, 138, 110);
    }

    .userInfo {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 16px;
        color:#eee;
        margin: 0 10px;
        font-size:14px;

        .avatarImg {
            position: relative;
            img {
                width: 100%;
            }
        }

        .setting {
            position: absolute;
            right: 0;
            top: 0;
        }

    }

    .info {
        width: 90vw;
        padding: 10px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #fff;
        margin-top: -40px;
    }
}
</style>
